<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	template="template/template.xhtml" xmlns:p="http://primefaces.org/ui">
	<ui:define name="title">Service manage page</ui:define>
	<ui:define name="script">
		<script src="http://maps.google.com/maps/api/js?sensor=false"
			type="text/javascript"></script>
		<script>
			function disablepage() {
				var blurDiv = document.createElement("div");
				blurDiv.id = "blurDiv";
				blurDiv.style.cssText = "position:absolute; top:0; right:0; width:"
						+ screen.width
						+ "px; height:"
						+ screen.height
						+ "px; background-color: #000000; opacity:0.01; filter:alpha(opacity=1)";

				document.getElementsByTagName("body")[0].appendChild(blurDiv);
			}

			function enablepage() {
				var blurDiv = document.getElementById("blurDiv");
				blurDiv.parentNode.removeChild(blurDiv);
			}

			var intervalId;

			function getdata() {
				intervalId = setInterval(function() {

					$('#acceptedTable').load(
							window.location.href + ' #acceptedTable');
				}, 1000);

			}

			function stopInter() {
				window.clearInterval(intervalId);
			}
		</script>
	</ui:define>

	<ui:define name="menu">
		<ul>
			<li class="active"><a href='service.jsf'><span>Service</span></a></li>
			<li><a href='taxi.jsf'><span>Taxi</span></a></li>
			<li><a href='map-view.jsf'><span>Map</span></a></li>

			<li><a href='customer.jsf'><span>Customer</span></a></li>
			<li><a href='user.jsf'><span>User</span></a></li>

		</ul>
	</ui:define>
	<ui:define name="main-content">
		<div style="width: 960; min-height: 700px;">
			<div style="padding-left: 37%; margin-top: 5px">
				<h2>Input Number Phone</h2>
				<p:growl widgetVar="g" id="growl"></p:growl>
				<p:notificationBar position="bottom" effect="slide" widgetVar="bar"
					styleClass="top">
					<h:outputText
						value="Processing and looking for a taxi, please wait"
						style="color:Blue;font-size:36px;">
					</h:outputText>
					<img style="margin-left: 10px" height="40" width="40"
						src="images/progress.gif"></img>
				</p:notificationBar>
				<p:notificationBar position="top" effect="slide" widgetVar="topbar">
					<h:outputText value="Getting data from google maps"
						style="color: red ;font-size:36px;"></h:outputText>
					<img style="margin-left: 10px" height="40" width="40"
						src="images/progress.gif"></img>
				</p:notificationBar>
				<h:form>
					<p:inputText value="#{taxiService.phoneNumber}" required="true"
						requiredMessage="Please input phone number" maxlength="11"
						validator="#{taxiService.validatePhoneNumber}">
						<p:ajax event="blur" update=":growl"></p:ajax>
					</p:inputText>

					<p:commandButton value="Search" style="margin-left:5px"
						actionListener="#{taxiService.findCustomer}" type="submit"
						ajax="false">
					</p:commandButton>
				</h:form>
				<br></br> <br></br>

				<p:selectOneRadio id="radioCustom" layout="custom"
					styleClass="noBorders" style="width: 10%;border-color: white;"
					value="#{taxiService.address}">
					<f:selectItem itemLabel="Home" itemValue="home"></f:selectItem>
					<f:selectItem itemLabel="Office" itemValue="office"></f:selectItem>
					<f:selectItem itemLabel="Newest" itemValue="newest"></f:selectItem>
				</p:selectOneRadio>
			</div>
			<div style="float: left; padding-left: 1%; width: 45%">
				<h:form>
					<p:panelGrid id="newCus" columns="2" style="width: 25%;"
						columnClasses="panelColumns" rendered="#{taxiService.newCustomer}">
						<f:facet name="header">Adding And Request</f:facet>
						<h:outputText value="Name"></h:outputText>
						<p:inputText value="#{taxiService.customer.customerName}"
							required="true" requiredMessage="please input a name">
							<p:ajax event="blur" update=":growl"></p:ajax>
						</p:inputText>
						<h:outputText value="Phone Number"></h:outputText>
						<p:inputText value="#{taxiService.customer.newestPhone}"
							required="true" requiredMessage="please input phone number"
							validator="#{taxiService.validatePhoneNumber}" maxlength="11">
							<p:ajax update=":growl"></p:ajax>
						</p:inputText>
						<p:panelGrid columns="2" styleClass="noBorders">
							<p:radioButton for=":radioCustom" style="border-color: white"
								id="opt4" itemIndex="0">
							</p:radioButton>
							<h:outputText value="Home Address"></h:outputText>
						</p:panelGrid>
						<p:inputTextarea rows="3" cols="30" maxlength="300"
							value="#{taxiService.customer.homeAddress}"></p:inputTextarea>
						<p:panelGrid columns="2" styleClass="noBorders">
							<p:radioButton for=":radioCustom" style="border-color: white"
								id="opt5" itemIndex="1">
							</p:radioButton>
							<h:outputText value="Office Address"></h:outputText>
						</p:panelGrid>
						<p:inputTextarea rows="3" cols="30" maxlength="300"
							value="#{taxiService.customer.officeAddress}"></p:inputTextarea>
						<p:panelGrid columns="2" styleClass="noBorders">
							<p:radioButton for=":radioCustom" style="border-color: white"
								id="opt6" itemIndex="2">
							</p:radioButton>
							<h:outputText value="Newest Address"></h:outputText>
						</p:panelGrid>
						<p:inputTextarea rows="3" cols="30" maxlength="300"
							value="#{taxiService.customer.newestAddress}"></p:inputTextarea>
						<h:outputText value="Number of seat"></h:outputText>
						<p:selectOneRadio value="#{taxiService.numberOfSeat}"
							style="width: 10%;border-color: #f2f5f7; " layout="pageDirection"
							requiredMessage="Please choose number of seat" required="true">
							<p:ajax update=":growl"></p:ajax>
							<f:selectItem itemValue="4" itemLabel="4" />
							<f:selectItem itemLabel="7" itemValue="7" />
						</p:selectOneRadio>
						<f:facet name="footer">
							<p:commandButton value="Submit"
								actionListener="#{taxiService.add}" widgetVar="addButton"
								disabled="#{!taxiService.addEnable}" type="submit"
								onclick="bar.show(),getdata(), disablepage()"
								oncomplete="bar.hide(), stopInter(), enablepage()"
								update=":growl,@this,:processTable,:acceptedTable">
							</p:commandButton>
						</f:facet>
					</p:panelGrid>
					<p:panelGrid id="oldCus" columns="2" style="width: 30%;"
						columnClasses="panelColumns" rendered="#{taxiService.oldCustomer}">
						<f:facet name="header">Updating And Request</f:facet>
						<h:outputText value="Name"></h:outputText>
						<p:inputText readonly="true"
							value="#{taxiService.customer.customerName}" required="true"
							requiredMessage="please input name">
							<p:ajax update=":growl"></p:ajax>
						</p:inputText>
						<h:outputText value="Phone Number"></h:outputText>
						<p:inputText value="#{taxiService.customer.newestPhone}"
							required="true" requiredMessage="please input phone number"
							readonly="true" validator="#{taxiService.validatePhoneNumber}">
							<p:ajax update=":growl"></p:ajax>
						</p:inputText>
						<p:panelGrid columns="2" styleClass="noBorders">
							<p:radioButton for=":radioCustom"
								style="border-color: white;border: hidden; " id="opt1"
								itemIndex="0">
							</p:radioButton>
							<h:outputText value="Home Address"></h:outputText>
						</p:panelGrid>
						<p:inputTextarea rows="3" cols="30" maxlength="300"
							value="#{taxiService.customer.homeAddress}"></p:inputTextarea>
						<p:panelGrid columns="2" styleClass="noBorders">
							<p:radioButton for=":radioCustom" style="border-color: white"
								id="opt2" itemIndex="1">
							</p:radioButton>
							<h:outputText value="Office Address"></h:outputText>
						</p:panelGrid>
						<p:inputTextarea rows="3" cols="30" maxlength="300"
							value="#{taxiService.customer.officeAddress}"></p:inputTextarea>
						<p:panelGrid columns="2" styleClass="noBorders">
							<p:radioButton for=":radioCustom" style="border-color: white"
								id="opt3" itemIndex="2">
							</p:radioButton>
							<h:outputText value="Newest Address"></h:outputText>
						</p:panelGrid>
						<p:inputTextarea rows="3" cols="30" maxlength="300"
							value="#{taxiService.customer.newestAddress}"></p:inputTextarea>
						<h:outputText value="Number of seat"></h:outputText>
						<p:selectOneRadio id="numseat" value="#{taxiService.numberOfSeat}"
							style="width: 10%;border-color: #f2f5f7; " layout="pageDirection"
							requiredMessage="Please choose number of seat" required="true">
							<p:ajax update=":growl"></p:ajax>
							<f:selectItem itemValue="4" itemLabel="4" />
							<f:selectItem itemLabel="7" itemValue="7" />
						</p:selectOneRadio>
						<f:facet name="footer">
							<p:commandButton value="Submit" id="updateButton"
								widgetVar="update1"
								onclick="bar.show(), getdata(), update1.disable(),disablepage()"
								oncomplete="bar.hide(), enablepage(), stopInter()"
								actionListener="#{taxiService.update}"
								update=":growl,@this,:processTable,:acceptedTable" type="submit"
								disabled="#{!taxiService.updateEnable}">
							</p:commandButton>
							<p:commandButton value="Reback" widgetVar="rebackButton"
								actionListener="#{taxiService.reback}" update="updateButton"></p:commandButton>
						</f:facet>
					</p:panelGrid>
				</h:form>
			</div>
			<div style="float: right; margin-right: 10px">
				<h:form>
					<p:poll interval="10" update=":processTable"></p:poll>
				</h:form>
				<p:dataTable id="processTable" value="#{taxiService.useServices}"
					paginator="true" rows="10"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
					var="item">
					<p:column style="text-align: center;">
						<f:facet name="header">Number Plate</f:facet>
						<h:outputText value="#{item.taxi.numberPlate}"></h:outputText>
					</p:column>
					<p:column style="text-align: center; width: 25%">
						<f:facet name="header">Driver Phone</f:facet>
						<h:outputText value="#{item.taxi.driverPhone}"></h:outputText>
					</p:column>
					<p:column style="text-align: center; width: 25%">
						<f:facet name="header">Customer Phone</f:facet>
						<h:outputText value="#{item.customer.newestPhone}"></h:outputText>
					</p:column>
					<p:column style="text-align: center;">
						<f:facet name="header">Status</f:facet>
						<h:outputText
							value="#{ item.service.status == 1 ? 'Accepted' : 
						item.service.status == 2 ? 'Picked up' : item.service.status == 3 ? 'Finished' : 'Fail' }"></h:outputText>
					</p:column>
					<p:column style="text-align: center;">
						<f:facet name="header">Map</f:facet>
						<p:column>
							<h:form>
								<p:commandLink id="mapBtn" value="click"
									oncomplete="mapview.show()" update=":mapid"
									onclick="topbar.show(), disablepage()"
									onsuccess="topbar.hide(), enablepage()"
									onerror="topbar.hide(),enablepage()"
									actionListener="#{taxiService.mapView}">
									<f:attribute name="idmap" value="#{item.serviceId}">
									</f:attribute>
								</p:commandLink>
							</h:form>
						</p:column>
					</p:column>

				</p:dataTable>
				<p:dialog header="Map View" widgetVar="mapview" showEffect="explode"
					hideEffect="explode">
					<p:gmap id="mapid" center="#{taxiService.mapCenter}" type="ROADMAP"
						model="#{taxiService.map}" zoom="#{taxiService.zoomLevel}" fitBounds="true"
						style="width:500px;height:450px;">
					</p:gmap>
				</p:dialog>
				<br></br> <br></br>
				<h:panelGroup id="acceptedTable">
					<p:dataTable id="nesttable" value="#{taxiService.acceptedTaxies}"
						var="item" paginator="true" style="width: 10%" rows="10"
						rendered="#{taxiService.lengthOfList !=0 }"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}">
						<f:facet name="header">Accepted Taxies</f:facet>
						<p:column style="text-align: center;">
							<f:facet name="header">Distance(Km)</f:facet>
							<h:outputText value="#{item.distance}"></h:outputText>
						</p:column>
						<p:column style="text-align: center;">
							<f:facet name="header">Number plate</f:facet>
							<h:outputText value="#{item.numberPlate}"></h:outputText>
						</p:column>
					</p:dataTable>
				</h:panelGroup>
			</div>
		</div>
	</ui:define>

</ui:composition>